<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}  {% endblock %}</title>
    
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />

    <link type="text/css" rel="stylesheet" href="{{ asset('css/materialize.css') }}" media="screen,projection">
    <link type="text/css" rel="stylesheet" href="{{ asset('css/design.css') }}">
    <link type="text/css" rel="stylesheet" href="{% if is_granted("ROLE_ADMIN") %} {{ asset('css/layoutBackend.css') }} {% else %} {{ asset('css/layoutFrontend.css') }} {% endif %}">
    <link type="text/css" rel="stylesheet" href="{{ asset('css/jquery.dataTables.css') }}">
    {% block stylesheets %} {% endblock %}
</head>
<body>

    {% include "menu.html.twig" %}

    {% if is_granted("ROLE_ADMIN") %}
        {% embed "backendLayout.html.twig" %} 
        {% endembed %}
    {% else %}
        {% include("frontendLayout.html.twig") %}
    {% endif %}

    <div class="main">
        {% if not is_granted("ROLE_ADMIN") %} <div class="container"> {% endif %}
            {% block body %} {% endblock %}
         {% if not is_granted("ROLE_ADMIN") %} </div> {% endif %}
    </div>

{% block javascripts %}
    <script type="application/javascript" src="{{ asset('js/jquery.min.js') }}"></script>
    <script type="application/javascript" src="{{ asset('js/jquery.tableSorter.js') }}"></script>
    <script type="application/javascript" src="{{ asset('js/jquery.tableSorter.pager.js') }}"></script>
    <script type="application/javascript" src="{{ asset('js/jquery.dataTables.min.js') }}"></script>

    <script type="application/javascript" src="{{ asset('js/materialize.min.js') }}"></script>

    <script type="application/javascript" src="{{ asset("js/script.js") }}"></script>

{% endblock %}
</body>
</html>
